<template>
  <div>
    <el-table :data="userlist" :row-style="{ color: '#FF6A6A' }" :fit="true">
      <el-table-column
        align="center"
        prop="user"
        label="账号"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="userName"
        label="昵称"
      ></el-table-column>
      <el-table-column label="首页" align="center">
        <template #default="scope">
          <el-switch
            @change="limitChange(scope.row)"
            :disabled="disablefun(scope.row, 'isLove')"
            v-model="scope.row.limitMange.isLove"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <span style="padding-left:10px;">{{
            scope.row.limitMange.isLove ? "权限激活" : "权限关闭"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户管理" align="center">
        <template #default="scope">
          <el-switch
            @change="limitChange(scope.row)"
            :disabled="disablefun(scope.row, 'isUserMange')"
            v-model="scope.row.limitMange.isUserMange"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <span style="padding-left:10px;">{{
            scope.row.limitMange.isUserMange ? "权限激活" : "权限关闭"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数据管理" align="center">
        <template #default="scope">
          <el-switch
            @change="limitChange(scope.row)"
            :disabled="disablefun(scope.row, 'isDataMange')"
            v-model="scope.row.limitMange.isDataMange"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <span style="padding-left:10px;">{{
            scope.row.limitMange.isDataMange ? "权限激活" : "权限关闭"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="相册管理" align="center">
        <template #default="scope">
          <el-switch
            @change="limitChange(scope.row)"
            :disabled="disablefun(scope.row, 'isImageMange')"
            v-model="scope.row.limitMange.isImageMange"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <span style="padding-left:10px;">{{
            scope.row.limitMange.isImageMange ? "权限激活" : "权限关闭"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="消费管理" align="center">
        <template #default="scope">
          <el-switch
            @change="limitChange(scope.row)"
            :disabled="disablefun(scope.row, 'isExpenseMange')"
            v-model="scope.row.limitMange.isExpenseMange"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <span style="padding-left:10px;">{{
            scope.row.limitMange.isExpenseMange ? "权限激活" : "权限关闭"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="聊天管理" align="center">
        <template #default="scope">
          <el-switch
            @change="limitChange(scope.row)"
            :disabled="disablefun(scope.row, 'isChatMange')"
            v-model="scope.row.limitMange.isChatMange"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <span style="padding-left:10px;">{{
            scope.row.limitMange.isChatMange ? "权限激活" : "权限关闭"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="权限控制" align="center">
        <template #default="scope">
          <el-switch
            @change="limitChange(scope.row)"
            :disabled="disablefun(scope.row, 'isControlMange')"
            v-model="scope.row.limitMange.isControlMange"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <span style="padding-left:10px;">{{
            scope.row.limitMange.isControlMange ? "权限激活" : "权限关闭"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮件" align="center">
        <template #default="scope">
          <el-switch
            @change="limitChange(scope.row)"
            :disabled="disablefun(scope.row, 'isEmailMange')"
            v-model="scope.row.limitMange.isEmailMange"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <span style="padding-left:10px;">{{
            scope.row.limitMange.isEmailMange ? "权限激活" : "权限关闭"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            size="mini"
            :type="scope.row.disable ? 'warning' : 'success'"
            @click="disableFun(scope.$index, scope.row)"
            >{{ scope.row.disable ? "禁用" : "激活" }}</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="removeFun(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

import {onMounted} from "vue";
import controlJS from "./control";
export default {
  name: "control",
  setup() {
    let {methodFun:{getUser,limitChange,disablefun},userlist} = controlJS();
    onMounted(() => {
      getUser();
    });
    return {
      userlist,
      limitChange,
      disablefun,
    };
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-table {
  background-color: transparent;
}

/deep/.el-table th,
.el-table tr {
  background-color: transparent !important;
}
</style>
